<template>
    <view class="content">
		<u-navbar title="举报"  :autoBack="true">
				</u-navbar>
        <view class="add">
            
            <view class="c1">被举报用户ID/昵称</view>
            <view class="c2">
                <u--input
                    v-model='row.accout_or_nickname'
                    placeholder="请输入"
                    :customStyle="{padding: '0 32rpx'}"
                >
                </u--input>
            </view>
            
            <view class="c1">内容</view>
            <view class="c3">
                <textarea v-model="row.issue" />
            </view>
            
            <view class="c1">截图上传</view>
            <view class="c2">
                <u-upload
                    :fileList="fileList1"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="1"
                    multiple
                    :maxCount="10"
                ></u-upload>
            </view>
            
        </view>
        
        <view class="but">
            <view class="s2" @click="onSend()">
                <text>提 交</text>
            </view>
        </view>
    </view>
</template>

<script>
    import conf from '@/common/config.js';
    export default {
        data() {
            return {
                fileList1: [],
                row: {
                    accout_or_nickname: '',
                    issue: '',
                    screenshot_images: '',
                }
            };
        },
        methods: {
            // 删除图片
            deletePic(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                // console.log('lists', lists, this.fileList1)
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`fileList${event.name}`][fileListLen]
                    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                let host_url = conf.url_config + '/api/common/upload';
                
                return new Promise((resolve, reject) => {
                    let a = uni.uploadFile({
                        url: host_url,
                        filePath: url,
                        name: 'file',
                        formData: {
                            user: 'test'
                        },
                        header: {
                            Token: this.vuex_token
                        },
                        success: (res) => {
                            let data = JSON.parse(res.data);
                            setTimeout(() => {
                                resolve(data.data.url)
                            }, 1000)
                        }
                    });
                })
            },
            onSend() {
                let that = this
                let data = {
                    accout_or_nickname: this.row.accout_or_nickname,
                    issue: this.row.issue,
                };
                
                let image = [];
                console.log(this.fileList1);
                this.fileList1.forEach(v => {
                    image.push(v.url);
                });
                
                data.screenshot_images = image.join(',')
                
                this.$API.sendReport(data).then(res => {
                    uni.showModal({
                        content: '提交成功',
                        showCancel: false,
                        success:function(){
                            uni.redirectTo({
                                url: '/pages/index/index'
                            })
                        }
                    })
                    
                });
            }
        }
    }
</script>

<style lang="scss">
.content {
    width: 670rpx;
    margin: 0 auto;
}
.add {
    width: 590rpx;
    padding: 52rpx 40rpx;
    background-color: #fff;
    border-radius: 48rpx;
    margin-top: 52rpx;
    
    .s1 {
        width: 100%;
        height: 34rpx;
        font-size: 28rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 600;
        color: #7677EB;
        line-height: 34rpx;
        text-align: center;
    }
    .title {
        width: 100%;
        height: 52rpx;
        font-size: 36rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 600;
        color: #110202;
        line-height: 52rpx;
        text-align: center;
        margin-top: 16rpx;
    }
    
    .c1 {
        height: 28rpx;
        font-size: 28rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 400;
        color: #7D8592;
        line-height: 28rpx;
        margin-top: 56rpx;
    }
    
    .c2 {
        width: 590rpx;
        margin-top: 40rpx;
        /deep/ .u-input {
            height: 98rpx;
            border-radius: 28rpx;
        }
    }
    
    .c3 {
        width: 526rpx;
        height: 166rpx;
        margin-top: 40rpx;
        border: 2rpx solid #D8E0F0;
        border-radius: 16rpx;
        padding: 32rpx;
    }
}

.but {
    @include flex;
    margin-top: 60rpx;
    margin-bottom: 60rpx;
    
    .s2 {
        width: 290rpx;
        height: 96rpx;
        background: #7677EB;
        box-shadow: 0 12rpx 24rpx 0 rgba(63,140,255,0.2637);
        border-radius: 28rpx;
        margin: 0 auto;
        text-align: center;
        
        text {
            font-size: 30rpx;
            font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 96rpx;
        }
    }
}
</style>
